<template>
  <div class="detail">
    <header v-if="shop && shop.score">
      <div>
        <strong>{{ shop.score }}</strong>
        <span>商家评分</span>
      </div>
      <div>
        <score :score="shop.score" :isText="false" :size="15" />
        <span>商家星级</span>
      </div>
      <div>
        <h3>96%</h3>
        <span>配送满意度</span>
      </div>
    </header>
    <div class="comment_container">
      <div class="tag">
        <span
          :class="{ active: currentIndex == index }"
          v-for="(item, index) in tagList"
          :key="index"
          @click="selectTag(index)"
          >{{ item }}</span
        >
      </div>
      <div class="content">
        <ul>
          <li v-for="(item, index) in commentList" :key="index">
            <!-- <img class="avatar" :src="imageUrl + item.user_avatar" alt="" /> -->
            <!-- 测试图片 -->
            <img class="avatar" src="@/assets/images/8.jpg" />
            <div class="comment">
              <p class="clearfix">
                <span class="left">{{ item.user_name }}</span>
                <span class="right">{{ item.created_at | showDate }}</span>
              </p>
              <score :score="item.score" :isText="false" />
              <p class="text">{{ item.content }}</p>
              <div class="pic">
                <!-- <img
                  :src="imageUrl + pic"
                  v-for="(pic, i) in imageList(item.images)"
                  :key="i"
                  alt=""
                /> -->
                <!-- 测试图片 -->
                <img src="@/assets/images/11.jpg" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <v-loading v-if="showLoading" /> -->
  </div>
</template>

<script>
import Score from '@/components/content/score/Score';

import { imageUrl } from '@/config/env';
import { formatDate } from '@/common/utils';
import { getShopComment, getShopDetail } from '@/network/getData';

export default {
  data() {
    return {
      showLoading: true,
      imageUrl,
      shopId: null, // 店铺ID
      tagList: ['全部', '好评', '差评', '有图'], // 标签
      comment: [], // 评论列表
      shop: {}, // 店铺信息
      currentIndex: 0 // 当前选择的标签索引
    };
  },
  components: {
    Score
  },
  created() {
    this.shopId = this.$route.query.shopId;
  },
  mounted() {
    this.initData();
  },
  computed: {
    // 图片列表
    imageList() {
      return function(data) {
        if (data) {
          return data.split('@');
        }
        return [];
      };
    },
    // 根据标签返回不同的评论
    commentList() {
      if (this.currentIndex === 1) {
        const result = this.comment.filter(item => item.score >= 3);
        return result;
      } else if (this.currentIndex === 2) {
        const result = this.comment.filter(item => item.score <= 2);
        return result;
      } else if (this.currentIndex === 3) {
        const result = this.comment.filter(item => item.images !== '');
        return result;
      } else {
        return this.comment;
      }
    }
  },
  methods: {
    async initData() {
      const comment = await getShopComment(this.shopId);
      this.comment = comment.data;
      const shop = await getShopDetail(this.shopId);
      this.shop = shop.data;
      this.showLoading = false;
    },
    selectTag(index) {
      this.currentIndex = index;
    }
  },
  filters: {
    // 格式化时间
    showDate(value) {
      const date = new Date(value);
      return formatDate(date, 'yyyy-MM-dd');
    }
  }
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ccc;
    strong {
      font-size: 20px;
      color: var(--color-base);
    }
    span {
      margin-top: 8px;
      font-size: var(--font-size);
    }
  }
  div:last-of-type {
    border: none;
  }
}
.comment_container {
  margin-top: 10px;
  background-color: #fff;
  .tag {
    margin-left: 10px;
    padding-top: 15px;
    span {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid #ccc;
      margin-right: 15px;
    }
  }
  .content {
    margin-top: 15px;
    li {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #eee;
      .avatar {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .comment {
        width: 100%;
        .clearfix {
          font-size: var(--font-size);
          span:first-child {
            color: #222;
          }
        }
        .text {
          margin: 5px 0 8px;
          font-size: var(--font-size);
          color: #222;
        }
        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }
    }
  }
}
.active {
  color: var(--color-base);
  border-color: var(--color-base) !important;
}
</style>
